<template>
  <div class="mt-4 space-y-2">
    <div class="p-2 space-y-2 rounded-md bg-muted/50 highlight-white/5">
      <div>
        <p class="font-mono text-sm font-semibold text-indigo-400">
          <span>rgb(156, 220, 254)</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { watch } from 'vue';
import { ElementAppliedStyleRules } from '@root/src/utils/CSSRulesUtils';
import {
  ElementBasicSelector,
  ElementProperties,
} from '@root/src/utils/getElProperties';
import { StyleDataItem } from '../../app-plugin';
import { EL_ATTR_NAME } from '@root/src/utils/constant';

interface Props {
  elSelector: string;
  styleData: StyleDataItem;
  properties: ElementProperties;
  basicSelector: ElementBasicSelector;
}
const props = defineProps<Props>();
const emits = defineEmits<{
  (e: 'update:appliedStyle', value: ElementAppliedStyleRules): void;
}>();

let styleElement: HTMLStyleElement | null = null;

watch(
  () => props.elSelector,
  () => {
    styleElement = document.querySelector<HTMLStyleElement>(
      `style[${EL_ATTR_NAME.customStyle}="${props.elSelector}"]`,
    );
  },
  { immediate: true },
);
</script>
